<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouterPush } from '@/hooks/common/router';
import SystemHeader from '@/components/common/system-header.vue';
import { useRouteStore } from '@/store/modules/route';
import { useAuthStore } from '@/store/modules/auth';
import { useProjectStore } from '@/store/modules/project';
import { getImg, getProjectLinkListApi, getProjectListApi } from '@/service/api/businessApi';
import bgimg from '@/assets/imgs/breedAquatics/1981727361698_.pic_hd.jpg';
import FishBto from './components/fish-btoL.vue';
import FishBtoR from './components/fish-btoR.vue';
import FishCard from './components/fish-left.vue';
import FishRight from './components/fish-right.vue';
const routeStore = useRouteStore();
const authStore = useAuthStore();
const { routerPush } = useRouterPush();
const routerLink = (path: any) => {
  if (path === '/breedingmanage/breedingpondmanage') {
    sessionStorage.setItem('menusKey', 'breedAquatics');
    routeStore.resetStore();
    setTimeout(() => {
      routerPush(path);
    }, 100);
  } else {
    routerPush(path);
  }
};

const open = ref(false);
const projectStore = useProjectStore();
const projectList: any = ref([]);
const projectId = ref(projectStore.currentProject?.id);
const refreshKey = ref(0);
const getProjectList = () => {
  getProjectListApi({
    pageNo: 1,
    pageSize: 1000,
    orgId: authStore.userInfo?.orgId
  }).then(res => {
    projectList.value = res.data?.data;
  });
};

const handleOk = () => {
  const currentProject = projectList.value.find((item: any) => item.id === projectId.value);
  projectStore.changeCurrentProject(currentProject);
  refreshKey.value++;
  open.value = false;
};

const imgPreview = ref('');
const getImgPreview = async (fileName: any) => {
  getImg({
    fileName
  }).then((res: any) => {
    imgPreview.value = window.URL.createObjectURL(res.data);
  });
};
onMounted(() => {
  if (authStore.userInfo.userType === 3) {
    if (projectStore.currentProject === undefined) {
      open.value = true;
    }
    getProjectList();
  }
  if (projectStore.currentProject && projectStore.currentProject.picName) {
    getImgPreview(projectStore.currentProject.picName);
  }

});
</script>

<template>
  <div class="App">
    <img
      v-if="imgPreview"
      style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%"
      :src="imgPreview"
      alt=""
    />
    <img
      v-else
      style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%"
      :src="bgimg"
      alt=""
    />
    <SystemHeader>
      <template #left>
        <span style="display: block; width: 90%" @click="routerLink('/breedingmanage/breedingpondmanage')">
          养殖管理
        </span>
      </template>
      <template #right>
        <span
          v-if="authStore.userInfo.userType !== 3"
          style="display: block; width: 90%"
          @click="routerLink('/dashboard')"
        >
          数据大屏
        </span>
        <span v-else style="display: block; width: 90%" @click="open = true">切换项目</span>
      </template>
    </SystemHeader>
    <div class="containers">
      <div>
        <FishCard :key="refreshKey" />
        <FishBto :key="refreshKey" />
      </div>
      <div>
        <FishRight :key="refreshKey" />
        <FishBtoR :key="refreshKey" />
      </div>
    </div>
    <AModal v-model:open="open" title="选择项目" @ok="handleOk">
      <ASelect
        ref="select"
        v-model:value="projectId"
        style="width: 100%; margin: 20px 0"
        :get-popup-container="triggerNode => triggerNode.parentNode"
        popup-class-name="select-project-h"
      >
        <ASelectOption v-for="item in projectList" :key="item.id">
          {{ item.name }}
        </ASelectOption>
      </ASelect>
    </AModal>
  </div>
</template>

<style lang="scss" scoped>
:deep(.select-project-h) {
  position: absolute;
  left: 0 !important;
  top: 36px !important;
}
.App {
  position: relative;
  height: 100%;
  //background-image: url('../../assets/imgs/index-bg.png');
  background-size: 100% 100%;
  overflow: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .containers {
    width: 100%;
    position: absolute;
    top: 125px;
    display: flex;
    justify-content: space-between;
    div {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
